<template>
  <div class="footer-container">
    <div class="footer-wrap">
      <div class="footer-info">
        <div class="footer-info-intro">
          <h4>带TA游旅游网</h4>
          <p>中国年轻一代用得更多的旅游网站</p>
          <p>上亿旅行者共同打造的"旅行神器"</p>
          <p>60,000 多个全球旅游目的地</p>
          <p>600,000 个细分目的地新玩法</p>
          <p>760,000,000 次攻略下载</p>
          <p>38,000 家旅游产品供应商</p>
        </div>
        <div class="footer-info-about">
          <h4>关于我们</h4>
          <p>
            <a href="/" rel="nofollow">关于带TA游</a>
            <a href="/" class="m_l_10" rel="nofollow">联系我们</a>
          </p>
          <p>
            <a href="/" rel="nofollow">隐私政策</a>
            <a href="/" rel="nofollow" class="m_l_10">商标声明</a>
          </p>
          <p><a href="/" rel="nofollow">服务协议</a></p>
          <p><a href="/" rel="nofollow">商城平台服务协议</a></p>
        </div>
        <div class="footer-info-service">
          <h4>旅行服务</h4>
          <p class="service-item">
            <a target="_blank" href="/strategy">旅游攻略</a>
            <a target="_blank" href="/hotel">酒店预订</a>
          </p>
          <p class="service-item">
            <a target="_blank" href="/strategy">旅游攻略</a>
            <a target="_blank" href="/hotel">酒店预订</a>
          </p>
          <p class="service-item">
            <a target="_blank" href="/strategy">旅游攻略</a>
            <a target="_blank" href="/hotel">酒店预订</a>
          </p>
          <p class="service-item">
            <a target="_blank" href="/strategy">旅游攻略</a>
            <a target="_blank" href="/hotel">酒店预订</a>
          </p>
        </div>
        <div class="footer-info-qrcode">
          <div class="qrcode-item">
            <el-image
              style="width: 100px; height: 100px"
              src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90"
            />
            <p class="qrcode-info">带TA游APP<br />扫描立即下载</p>
          </div>
          <div class="qrcode-item">
            <el-image
              style="width: 100px; height: 100px"
              src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90"
            />
            <p class="qrcode-info">带TA游旅游<br />订阅号</p>
          </div>
          <div class="qrcode-item">
            <el-image
              style="width: 100px; height: 100px"
              src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90"
            />
            <p class="qrcode-info">带TA游良品<br />官方服务号</p>
          </div>
        </div>
        <div class="footer-info-social">
          <h4 class="social-title">旅游之前，先上带TA游！</h4>
          <a class="footer-social-weibo" target="_blank" href="http://weibo.com/mafengwovip" rel="nofollow">
            <i class="ft-social-icon" />
          </a>
          <a class="footer-social-qzone" target="_blank" href="http://1213600479.qzone.qq.com/" rel="nofollow">
            <i class="ft-social-icon" />
          </a>
        </div>
      </div>
      <div class="footer-links">
        <a target="_blank" href="http://china.makepolo.com/">马可波罗</a>
        <a target="_blank" href="http://www.onlylady.com/">Onlylady女人志</a>
        <a target="_blank" href="http://trip.elong.com/">艺龙旅游指南</a>
        <a target="_blank" href="http://www.cncn.com">欣欣旅游网</a>
        <a target="_blank" href="http://www.8264.com/">户外运动</a>
        <a target="_blank" href="http://www.yue365.com/">365音乐网</a>
        <a target="_blank" href="http://ishare.iask.sina.com.cn/">爱问共享资料</a>
        <a target="_blank" href="http://www.uzai.com/">旅游网</a>
        <a target="_blank" href="http://www.zongheng.com/">小说网</a>
        <a target="_blank" href="http://www.xuexila.com/">学习啦</a>
        <a target="_blank" href="http://www.yododo.com">游多多自助游</a>
        <a target="_blank" href="http://www.zhcpic.com/">问答</a>
        <a target="_blank" href="http://huoche.mafengwo.cn/">火车时刻表</a>
        <a target="_blank" href="http://www.lvmama.com">驴妈妈旅游网</a>
        <a target="_blank" href="http://www.haodou.com/">好豆美食网</a>
        <a target="_blank" href="http://www.taoche.com/">二手车</a>
        <a target="_blank" href="http://www.lvye.cn">绿野户外</a>
        <a target="_blank" href="http://www.tuniu.com/">途牛旅游网</a>
        <a target="_blank" href="http://www.mapbar.com/">图吧</a>
        <a target="_blank" href="http://www.chnsuv.com">SUV联合越野</a>
        <a target="_blank" href="http://www.uc.cn/">手机浏览器</a>
        <a target="_blank" href="http://sh.city8.com/">上海地图</a>
        <a target="_blank" href="http://www.tianqi.com/">天气预报查询</a>
        <a target="_blank" href="http://www.ly.com/">同程旅游</a>
        <a target="_blank" href="http://www.tieyou.com/">火车票</a>
        <a target="_blank" href="http://www.yunos.com/">YunOS</a>
        <a target="_blank" href="http://you.ctrip.com/">携程旅游</a>
        <a target="_blank" href="http://www.jinjiang.com">锦江旅游</a>
        <a target="_blank" href="http://www.huoche.net/">火车时刻表</a>
        <a target="_blank" href="http://www.tripadvisor.cn/">TripAdvisor</a>
        <a target="_blank" href="http://www.tianxun.com/">天巡网</a>
        <a target="_blank" href="http://www.mayi.com/">短租房</a>
        <a target="_blank" href="http://www.zuzuche.com">租租车</a>
        <a target="_blank" href="http://www.5fen.com/">五分旅游网</a>
        <a target="_blank" href="http://www.zhuna.cn/">酒店预订</a>
        <a target="_blank" href="http://www.ailvxing.com">爱旅行网</a>
        <a target="_blank" href="http://360.mafengwo.cn/all.php">旅游</a>
        <a target="_blank" href="http://vacations.ctrip.com/">旅游网</a>
        <a target="_blank" href="http://www.wed114.cn">wed114结婚网</a>
        <a target="_blank" href="http://www.chexun.com/">车讯网</a>
        <a target="_blank" href="http://www.aoyou.com/">遨游旅游网</a>
        <a target="_blank" href="http://www.91.com/">手机</a>
        <a href="javascript:;" target="_blank">更多友情链接&gt;&gt;</a>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.footer-container {
  padding-bottom: 20px;
  background-color: #3c3c3c;
  font-size: 12px;
  color: #c2c2c2;
  .footer-wrap {
    width: 1105px;
    margin: 0 auto;
    .footer-info {
      padding: 30px 8px 40px 8px;
      border-bottom: 1px solid #575a5b;
      .footer-info-intro {
        display: inline-block;
        vertical-align: top;
        width: 200px;
        line-height: 22px;
        margin-right: 68px;
      }
      .footer-info-about {
        display: inline-block;
        vertical-align: top;
        width: 128px;
        line-height: 22px;
        margin-right: 85px;
        a {
          background-color: transparent;
          text-decoration: none;
          color: #c2c2c2;
          cursor: pointer;
          &:hover {
            color: #fff;
            text-decoration: none;
          }
        }
      }
      .footer-info-service {
        display: inline-block;
        vertical-align: top;
        width: 135px;
        line-height: 22px;
        margin-right: 80px;
        h4 {
          text-align: center;
        }
        .service-item {
          display: flex;
          justify-content: space-between;
        }
        a {
          background-color: transparent;
          text-decoration: none;
          color: #c2c2c2;
          cursor: pointer;
          &:hover {
            color: #fff;
            text-decoration: none;
          }
        }
      }
      .footer-info-qrcode {
        display: inline-block;
        padding-top: 22px;
        .qrcode-item {
          display: inline-block;
          margin-left: 30px;
          vertical-align: top;
          .qrcode-info {
            text-align: center;
            font-size: 12px;
          }
        }
      }
      .footer-info-social {
        padding-top: 25px;
        text-align: center;
        .social-title {
          height: 30px;
          font-size: 16px;
          overflow: hidden;
        }
        .footer-social-weibo {
          display: inline-block;
          margin: 0 6px;
          .ft-social-icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            background: url(../assets/images/mfw-footer-sprite7.png) no-repeat 0 0;
            overflow: hidden;
          }
        }
        .footer-social-qzone {
          display: inline-block;
          margin: 0 6px;
          .ft-social-icon {
            display: inline-block;
            width: 28px;
            height: 28px;
            background: url(../assets/images/mfw-footer-sprite7.png) no-repeat 0 0;
            background-position: -60px 0;
            overflow: hidden;
          }
        }
      }
      h4 {
        margin: 0px;
        padding-bottom: 10px;
        font-size: 14px;
        overflow: hidden;
      }
      .m_l_10 {
        margin-left: 10px;
      }
    }
    .footer-links {
      padding: 17px 0 0px 8px;
      line-height: 22px;
      border-top: 1px solid #575a5b;
      a {
        display: inline-block;
        margin-right: 12px;
        color: #c2c2c2;
        &:hover {
          outline: 0;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
